<template>
    <div class="face-container" @mousemove="handleMouseMove">
        <!-- 眼睛容器 -->
        <div class="eyes-wrapper">
            <svg class="eye left-eye" viewBox="0 0 100 100" ref="leftEye">
                <circle class="pupil" cx="50" cy="50" r="15" fill="#2C3E50" />
            </svg>
            <svg class="eye right-eye" viewBox="0 0 100 100" ref="rightEye">
                <circle class="pupil" cx="50" cy="50" r="15" fill="#2C3E50" />
            </svg>
        </div>

        <!-- 智能跳转按钮 -->
        <button class="cta-button" @click="navigateHome">
            {{ buttonText }}
            <span class="arrow">→</span>
        </button>
    </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import gsap from 'gsap'

// 响应式数据
const mouseX = ref(0)
const mouseY = ref(0)
const leftEye = ref(null)
const rightEye = ref(null)

// 按钮文本响应式
const buttonText = computed(() =>
    window.innerWidth < 768 ? '了解更多' : '探索菜鸟宇宙'
)

// 鼠标移动处理
const handleMouseMove = (e) => {
    mouseX.value = e.clientX / window.innerWidth
    mouseY.value = e.clientY / window.innerHeight
    animateEyes()
}

// 眼睛动画
const animateEyes = () => {
    const eyes = [leftEye.value, rightEye.value]
    eyes.forEach((eye, index) => {
        if (!eye) return
        const pupil = eye.querySelector('.pupil')
        const offsetX = (mouseX.value - 0.5) * 20 * (index === 0 ? 1 : 1)
        const offsetY = (mouseY.value - 0.5) * 20

        gsap.to(pupil, {
            duration: 0.3,
            x: offsetX,
            y: offsetY,
            ease: 'power2.out'
        })
    })
}

// 页面跳转
const navigateHome = () => {
    window.location.href = 'https://your-blog.com'
}

// 初始化眼睛位置
onMounted(() => {
    animateEyes()
})
</script>

<style scoped>
.face-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f0f4f8 0%, #d9e2ec 100%);
    padding: 2rem;
    overflow: hidden;
}

.eyes-wrapper {
    display: flex;
    gap: 4rem;
    margin-bottom: 3rem;
    position: relative;
    z-index: 1;
}

.eye {
    width: 80px;
    height: 80px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.pupil {
    transition: transform 0.3s ease;
}

.cta-button {
    padding: 0.8rem 2rem;
    font-size: 1.1rem;
    background: #FF6B6B;
    color: white;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
    z-index: 1;
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
}

.arrow {
    transition: transform 0.3s ease;
}

.cta-button:hover .arrow {
    transform: translateX(3px);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .eyes-wrapper {
        gap: 2rem;
    }

    .eye {
        width: 60px;
        height: 60px;
    }
}
</style>